{% extends "base.html" %}

{% block title %}文本生成 - 红楼梦数据分析{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2>红楼梦风格文本生成</h2>
        <p>基于阿里云百炼大模型 qwen3-coder，为您创作红楼梦风格的文本</p>
        
        <div class="card mt-4">
            <div class="card-body">
                <h5 class="card-title">生成设置</h5>
                <div class="mb-3">
                    <label for="topicInput" class="form-label">写作主题：</label>
                    <input type="text" class="form-control" id="topicInput" placeholder="例如：大观园的秋景">
                </div>
                <div class="mb-3">
                    <label for="lengthSelect" class="form-label">篇幅长短：</label>
                    <select class="form-select" id="lengthSelect">
                        <option value="短篇">短篇</option>
                        <option value="中篇">中篇</option>
                        <option value="长篇">长篇</option>
                    </select>
                </div>
                <button id="generateButton" class="btn btn-danger" onclick="generateText()">生成文本</button>
                <button id="clearButton" class="btn btn-secondary" onclick="clearText()">清空</button>
            </div>
        </div>
        
        <div class="card mt-4">
            <div class="card-body">
                <h5 class="card-title">生成结果</h5>
                <div id="resultArea" class="border p-3" style="min-height: 300px; background-color: #f8f9fa;">
                    <p class="text-muted">生成的红楼梦风格文本将显示在这里...</p>
                </div>
            </div>
        </div>
        
        <div class="card mt-4">
            <div class="card-body">
                <h5 class="card-title">创作主题示例</h5>
                <div class="row">
                    <div class="col-md-6">
                        <ul>
                            <li>大观园的春景</li>
                            <li>贾宝玉的梦境</li>
                            <li>林黛玉的诗词</li>
                            <li>薛宝钗的日常生活</li>
                            <li>王熙凤理家</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <ul>
                            <li>贾母的寿宴</li>
                            <li>元春省亲</li>
                            <li>刘姥姥进大观园</li>
                            <li>宝玉挨打之后</li>
                            <li>黛玉葬花</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function generateText() {
    const topic = document.getElementById('topicInput').value;
    const length = document.getElementById('lengthSelect').value;
    
    if (!topic.trim()) {
        alert('请输入写作主题');
        return;
    }
    
    // 显示加载状态
    document.getElementById('resultArea').innerHTML = '<p class="text-muted">正在创作中...</p>';
    document.getElementById('generateButton').disabled = true;
    
    // 发送请求到后端API
    fetch('/api/generate', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({topic: topic, length: length})
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('resultArea').innerHTML = `<div>${data.text}</div>`;
        document.getElementById('generateButton').disabled = false;
    })
    .catch(error => {
        document.getElementById('resultArea').innerHTML = `<p class="text-danger">生成出错: ${error.message}</p>`;
        document.getElementById('generateButton').disabled = false;
    });
}

function clearText() {
    document.getElementById('topicInput').value = '';
    document.getElementById('resultArea').innerHTML = '<p class="text-muted">生成的红楼梦风格文本将显示在这里...</p>';
}
</script>
{% endblock %}